<style>
.svg {
  background-color: #044273;
  padding: 20px;
  margin-bottom: 10px;
}
</style>
<div class="svg w800 h400" id='svg'></div>
<pre>1 svg里的默认渐变的起终点在哪里？为什么旋转是这样的</pre>
<div class="svg w800">
  <svg xmlns="http://www.w3.org/2000/svg" class='visible'>
    <!-- Stroke a circle with a gradient -->
    <defs>
      <linearGradient id="myGradientHorizontal">
        <stop offset="0%"   stop-color="rgba(253,253,255,0)" />
        <stop offset="50%"   stop-color="rgba(253,253,255,1)" />
        <stop offset="100%" stop-color="rgba(253,253,255,0)" />
      </linearGradient>
      <linearGradient id="myGradientVertical" gradientTransform='rotate(90)'>
        <stop offset="0%"   stop-color="rgba(253,253,255,0)" />
        <stop offset="50%"   stop-color="rgba(253,253,255,1)" />
        <stop offset="100%" stop-color="rgba(253,253,255,0)" />
      </linearGradient>
      <linearGradient id="myGradient45" gradientTransform='rotate(45)'>
        <stop offset="0%"   stop-color="rgba(253,253,255,0)" />
        <stop offset="50%"   stop-color="rgba(253,253,255,1)" />
        <stop offset="100%" stop-color="rgba(253,253,255,0)" />
      </linearGradient>
      
    </defs>
   
    <circle cx="150" cy="50" r="40" fill="none"
            stroke="url(#myGradientHorizontal)" />
    <rect width='200' height='1' y='50' fill='none' stroke='url(#myGradientHorizontal)' />
    <line x1='0' y1='9' x2='200' y2='10' stroke='url(#myGradientHorizontal)' /> <!-- 不能是横平竖直的，否则就看不见 -->

    <rect width='1' height='200' x='260' fill='none' stroke='url(#myGradientVertical)' />
    <line x1='300' y1='0' x2='299' y2='200' stroke='url(#myGradientVertical)' />

    <g>
      <path id='path1' d='M 350,0 L 550,0 L 550,100 L 350,100 Z' fill='none' stroke='white' opacity='0.2'/>
      
      <line x1='-100' y1='0' x2='100' y2='1' stroke='url(#myGradientHorizontal)'>
        <animateMotion dur="6s" repeatCount="indefinite" rotate='auto'>
          <mpath xlink:href="#path1"/>
        </animateMotion>
      </line>
    </g>
  </svg>
  <pre>2</pre>
</div>
<div class="svg w800">
  <svg>
    <linearGradient id="myGradientRotate" gradientUnits="userSpaceOnUse" gradientTransform=''>
      <stop offset="0%"   stop-color="rgba(253,253,255,0)" />
      <stop offset="30%"   stop-color="rgba(253,253,255,0)" />
      <stop offset="50%"   stop-color="rgba(253,253,255,1)" />
      <stop offset="70%"   stop-color="rgba(253,253,255,0)" />
      <stop offset="100%" stop-color="rgba(253,253,255,0)" />
    </linearGradient>
    <radialGradient id="myRadialGradient" gradientUnits="userSpaceOnUse" gradientTransform=''>
      <stop offset="0%"   stop-color="rgba(253,253,255,0)" />
      <stop offset="50%"   stop-color="rgba(253,253,255,1)" />
      <stop offset="100%" stop-color="rgba(253,253,255,0)" />
    </radialGradient>
    <!-- <animateTransform attributeType="XML" attributeName='gradientTransform' xlink:href="#myGradientRotate"
      type='rotate' from='0' to='360' dur='3s' repeatCount='indefinite' /> -->
    <rect width='300' height='150' x='0' y='0' stroke-width='2' fill='none' stroke='url(#myGradientRotate)'></rect>
  </svg>
  <pre>3</pre>
</div>
<button class="btn" id='delete'>-</button>
<button class="btn" id='add'>+</button>
